// 剧集壁纸
<template>
	<view class="dramaWallpaper_content">
		<z-paging ref="paging" :refresher-end-bounce-enabled="false" :refresher-complete-duration="300" :refresher-complete-delay="500"
		v-model="dataList" 
		:fixed="false" 
		:auto="false"
		@query="queryList"
		:default-page-size="100"
		loading-more-no-more-text="已经到底线了">
		    <view class="imgInfo" :style="{ 'height': item.img_newH + 'px'}" v-for="(item, index) in dataList" :key="index" >
		    	<image class="img"
		    	:src="item.cover" 
				 mode="aspectFill"
		    	:style="{ height: item.img_newH + 'px' }"
	            @longpress="longpress(item)"></image>
		    </view>
		    
		</z-paging>
		
	</view>
</template>

<script>
	import interfaces from "@/utils/interfaces.js"
	import config from "@/utils/config.js"
	import tools from '@/utils/tools.js'
	
	export default {
		components:{
		},
		data() {
			return {
				dataList:[],
				firstLoaded: false
			}
		},
		props:{
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			data: {
				type: Object,
				default: function(){
					return {}
				}
			}
		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if(newVal === this.tabIndex){
						//懒加载，当滑动到当前的item时，才去加载
						if(!this.firstLoaded){
							setTimeout(() => {
								this.$refs.paging.reload();
							}, 100);
						}
					}
				},
				immediate: true
			},
		},
		methods: {
			queryList(pageNum, pageSize) {
				// console.log("当前" + pageNum + "-" + pageSize)				
				let id = this.data.id
				let url = interfaces.square_block_rankinglist + id + ".json";
				let self = this
				self.request({
					url:url,
					methods:"GET",
					success:(res)=> {
						// console.log("获取剧情壁纸数据:" + res)
						setTimeout(function() {
							uni.showToast({
								icon:"none",
								title:"长按图片可保存到相册",
								duration:2000,
							})
						}, 500);
						let lists = res.content[0].lists
						self.$refs.paging.complete(lists)
						self.firstLoaded = true
						
						let imgWidth = uni.getWindowInfo().windowWidth
						lists.forEach((item, index) =>{
							let img_bili = item.img_w / item.img_h
							let img_newH = imgWidth / img_bili
							self.$set(item, "img_newH", img_newH)
						})
						
					},
					fail:(error)=> {
						console.log("错误 错误 错误:" + error + ":" + url)
					}
				})				
			},
			longpress(item) {
				uni.showActionSheet({
					itemList:['保存图片'],
					success: (res) => {
						if(res.tapIndex === 0) {
							tools.saveImageToAlbum(item.cover)
						}
					}
				})
			}
		},
		onLoad() {
			uni.showToast({
				icon:"none",
				title:"长按图片可保存到相册",
				duration:5000,
			})
		}
	}
</script>

<style lang="scss">
	.dramaWallpaper_content {
		/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
		height: 100%;
	}
	
	.imgInfo{
		display: flex;
		box-sizing: border-box;
		margin: 20px 15px;
		background-color: #ffffff;
		
		.img {
			display: flex;
			width: 100%;
			border-radius: 40rpx;
			border: 3px solid #D98A47;
		}
	}
</style>
